<template>
    <!-- 更新时间 -->
  <div class="top-title">
    <div class="one-title">
      <img class="bt-svg" src="http://mcgamehome.love/img2/763280f2be19f9cf82c78c96d6a92f2bf99b2e1b.png" >
      <span class="title-one span-def">最近更新的番剧</span>
    </div>
    <div class="timeListBox">
      <div class="timeList">
        <button class="timeBoxOne" :class="{butActive:nowDay === 8}" @click="qhWeek(8,'最近更新')"><span class="span-def">最近更新</span></button>
        <button class="timeBoxOne" :class="{butActive:nowDay === 1}" @click="qhWeek(1,'周一')"><span class="span-def">周一</span></button>
        <button class="timeBoxOne" :class="{butActive:nowDay === 2}" @click="qhWeek(2,'周二')"><span class="span-def">周二</span></button>
        <button class="timeBoxOne" :class="{butActive:nowDay === 3}" @click="qhWeek(3,'周三')"><span class="span-def">周三</span></button>
        <button class="timeBoxOne" :class="{butActive:nowDay === 4}" @click="qhWeek(4,'周四')"><span class="span-def">周四</span></button>
        <button class="timeBoxOne" :class="{butActive:nowDay === 5}" @click="qhWeek(5,'周五')"><span class="span-def">周五</span></button>
        <button class="timeBoxOne" :class="{butActive:nowDay === 6}" @click="qhWeek(6,'周六')"><span class="span-def">周六</span></button>
        <button class="timeBoxOne" :class="{butActive:nowDay === 7}" @click="qhWeek(7,'周日')"><span class="span-def">周日</span></button>
      </div>
    </div>
  </div>
  <div class="up-list-all p-r" @mouseenter="mouseIn" @mouseleave="mouseOut">
    <div class="time-back-left p-a" :class="[{timeBackGreen:leftColor === 2},{timeBackPink:leftColor === 7},{timeBackYellowgreen:leftColor=== 1},{timeWeek3:leftColor === 3},{timeWeek4:leftColor === 4},{timeWeek5:leftColor === 5},{timeWeek6:leftColor === 6}]"></div>
    <div class="div-waike">
      <div class="right-button p-a" v-show="list.items.length >=6 && rightSvg" @click="nextPage">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.12805 15.8648C7.95732 15.6846 7.95732 15.3923 8.12805 15.2121L13.0652 10L8.12805 4.78789C7.95732 4.60765 7.95732 4.31542 8.12805 4.13518C8.29879 3.95494 8.5756 3.95494 8.74634 4.13518L13.7866 9.45607C14.0711 9.75647 14.0711 10.2435 13.7866 10.5439L8.74634 15.8648C8.5756 16.0451 8.29879 16.0451 8.12805 15.8648Z" stroke="#18191C" stroke-linecap="round" stroke-linejoin="round"></path></svg>
      </div>
      <div class="left-button p-a" v-show="nowPage > 1 && rightSvg" @click="lestPage">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
        </svg>
      </div>
      <div class="overHIde">
        <div class="up-list p-r"  ref="HotListAll">
          <template  v-for="(item, index) in list.items.slice(listNum3,listNum2)" :key="index">
            <div class="up-list-def-w box-active" v-show="index < listNum" :class="[{playerBox:index === isYes},{timeBackGreen:item.tvUpTime.split(' ')[0] === '周二'},
            {timeBackPink:item.tvUpTime.split(' ')[0] === '周日'},{timeBackYellowgreen:item.tvUpTime.split(' ')[0] === '周一'},{timeWeek3:item.tvUpTime.split(' ')[0] === '周三'},
            {timeWeek4:item.tvUpTime.split(' ')[0] === '周四'},{timeWeek5:item.tvUpTime.split(' ')[0] === '周五'},{timeWeek6:item.tvUpTime.split(' ')[0] === '周六'}]"  @mouseleave="yichu(index)" @mouseenter="yiru(index)">
              <router-link tag="a" target="_blank" :to="{path:'/video',query:{look:item.tvUrl,index:1}}">
              <div class="up-list-one p-r " >
                <img :src="item.tvImg" class="imgActive">
                <div class="player-all-box  p-a" :class="{noneBox:isNone === index}">
                  <div class="video-player-box bor-t-l-r p-r">
                    <!--                  <my-video :src="item.tvUrl" :type="item.tvType" ref="videoMy"></my-video>-->
                  </div>
                  <div class="tip p-a">
                    <span class="tip-span">{{item.tvTip.split(',')[0]}}</span>
                    <span class="tip-span">{{item.tvTip.split(',')[1]}}</span>
                    <span class="tip-span">更新至{{item.tvTip.split(',')[2]}}话</span>
                  </div>
                  <div class="go-player-box p-a">
                    <div class="go-box">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.625 9.61801C22.4583 10.6765 22.4583 13.3227 20.625 14.3812L9.75 20.6598C7.91667 21.7183 5.625 20.3952 5.625 18.2783L5.625 5.7209C5.625 3.60395 7.91667 2.28085 9.75 3.33933L20.625 9.61801Z" fill="white"></path></svg>
                    </div>
                    <div class="link-one">
                      <svg width="20" height="20" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.7012 2.2056C16.3764 1.08408 14.9557 0.49014 13.5124 0.500124C12.2642 0.508758 11.0773 0.968592 9.99888 1.80057C8.91 0.967692 7.70489 0.525487 6.45236 0.525498C5.00637 0.52551 3.58737 1.11472 2.29877 2.2056C0.858947 3.4245 0.231588 5.3246 0.250411 7.2015C0.269277 9.08271 0.934385 11.051 2.22373 12.4956C4.5884 15.1452 7.39076 17.303 8.74689 18.2861C9.49751 18.8302 10.5024 18.8307 11.2538 18.2885C11.8033 17.892 12.5838 17.3076 13.4724 16.5797C13.7928 16.3172 13.8398 15.8447 13.5773 15.5242C13.3148 15.2038 12.8423 15.1568 12.5219 15.4193C11.6613 16.1243 10.9057 16.6899 10.376 17.0722C10.1492 17.2358 9.85326 17.2354 9.62729 17.0716C8.30489 16.113 5.6024 14.0286 3.34284 11.4968C2.32409 10.3554 1.76602 8.75006 1.75034 7.18646C1.73461 5.61856 2.26134 4.20261 3.26795 3.35045C4.34581 2.43798 5.43282 2.02551 6.45238 2.0255C7.46816 2.02549 8.50699 2.43469 9.49557 3.33301C9.7816 3.59292 10.2183 3.59293 10.5043 3.33302C11.5011 2.42732 12.5229 2.007 13.5228 2.00009C14.525 1.99316 15.6103 2.40088 16.732 3.35045C17.7736 4.23224 18.3006 5.71209 18.2462 7.33685C18.2324 7.75083 18.5567 8.09766 18.9707 8.11151C19.3847 8.12536 19.7315 7.80098 19.7454 7.387C19.8103 5.44702 19.1893 3.4654 17.7012 2.2056ZM16 7.75C16 7.33579 15.6642 7 15.25 7C14.8358 7 14.5 7.33579 14.5 7.75V10.0015H12.25C11.8358 10.0015 11.5 10.3373 11.5 10.7515C11.5 11.1657 11.8358 11.5015 12.25 11.5015H14.5V13.75C14.5 14.1642 14.8358 14.5 15.25 14.5C15.6642 14.5 16 14.1642 16 13.75V
            11.5015H18.25C18.6642 11.5015 19 11.1657 19 10.7515C19 10.3373 18.6642 10.0015 18.25 10.0015H16V7.75Z" fill="white"></path></svg>
                    </div>
                  </div>
                  <div class="background-cover"></div>
                </div>
              </div>
              <div class="span-out-hid z-10">
                <span class="span-def">{{item.tvTitle}}</span>
              </div>
              <div class="weekSpan" :class="[{weekdayGreen:item.tvUpTime.split(' ')[0] === '周二'},{weekdayPink:item.tvUpTime.split(' ')[0] === '周日'},{weekSpan1:item.tvUpTime.split(' ')[0] === '周一'},
              {weekSpan3:item.tvUpTime.split(' ')[0] === '周三'},{weekSpan4:item.tvUpTime.split(' ')[0] === '周四'},{weekSpan5:item.tvUpTime.split(' ')[0] === '周五'},{weekSpan6:item.tvUpTime.split(' ')[0] === '周六'}]">{{item.tvUpTime}}</div>
              </router-link>

            </div>
          </template>
<!--          <template v-for="n  in 7-list.items.length" :key="n">-->
            <div class="mar-list-zw"  :class="[{timeBackGreen:rightColor === 2},{timeBackPink:rightColor === 7},{timeBackYellowgreen:rightColor === 1},{timeWeek3:rightColor === 3},{timeWeek4:rightColor === 4},{timeWeek5:rightColor === 5},{timeWeek6:rightColor === 6}]">

            </div>
<!--          </template>-->
          <!--  -->
        </div>
      </div>
    </div>
    <div class="time-back-right p-a" :class="[{timeBackGreen:rightColor === 2},{timeBackPink:rightColor === 7},{timeBackYellowgreen:rightColor === 1},{timeWeek3:rightColor === 3},{timeWeek4:rightColor === 4},{timeWeek5:rightColor === 5},{timeWeek6:rightColor === 6}]"></div>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted, reactive, ref} from 'vue'
import API from '@/api/AxiosConfig'

const list = reactive({
  items: [],
  // upList: [],
})
// const UpListBox = (el) => {
//   list.upList.push(el)
// }
let upList = document.getElementsByClassName("imgActive")
const HotListAll = ref(null)
const isYes = ref(null)
const isNone = ref(null)
const listNum = ref(7)
const nowDay = ref(8)
const leftColor = ref(null)
const rightColor = ref(null)
const newDay = ref('')
const nowPage =ref(1)
const videoMy = ref(null)
const rightSvg = ref(false)
const listNum2 = ref(7)
const listNum3 = ref(0)
const tjsx = ref('最近更新')
let cTimer = null
let uTimer = null
onMounted(() => {
  // if (document.body.clientWidth>1399){
    api(8,0,7)
  //
  // }else {
  //   api(8,0,6)
  //
  // }
  setTimeout(() =>{
   reSize()
  },250)
  window.addEventListener('resize',reSize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize',reSize)
})
function api(i,i2,i3) {
  API({ url: '/api/tv/TvUpTime/'+i+'/'+i2+'/'+i3, method: 'get' }).then(res => {
    list.items = res.data
    leftColor.value = list.items[0].tvDayNum
    rightColor.value = list.items[list.items.length-1].tvDayNum
    reSize()
}).catch(err => {
})

}
async function reSize() {
  if (document.body.clientWidth>1399){
    listNum.value = 7
    // addData()
  }else {
    listNum.value = 6
    // addData()
  }
  if (list.items.length === 7){
    rightColor.value = list.items[list.items.length-1].tvDayNum
  }
  clearTimeout(cTimer)
  cTimer = setTimeout(() => {
    // if (vc){
    setTimeout(() => {
      for (let i = 0; i < list.items.length; i++) {
        upList[i].style = 'height:'+(upList[i].offsetWidth*1.4)+'px'
      }
    },1)
    // }
  },50)
}
function yiru(index) {
  clearTimeout(uTimer)
  uTimer = setTimeout(() => {
    if (index < listNum.value - 1) {
      HotListAll.value.style = 'justify-content: flex-start;'
    } else {
      HotListAll.value.style = 'justify-content: flex-end;'
    }
    isYes.value = index
    isNone.value = index
  },500)
}
function yichu(index) {
  clearTimeout(uTimer)
  isYes.value = null
  isNone.value = !index
}
function mouseIn() {
  rightSvg.value = true
}
function mouseOut() {
  rightSvg.value = false
}
function qhWeek(i,day){
  nowDay.value = i
  // console.log(nowDay.value)

  // if (i !== 0){
  //   setNowTimes()
  // }else {
  //   newDay.value = day
  api(i,0,7)
  // }
  // tjsx.value = day
  // tj.value = list.items.tvUpTime.split(' ')[0]
  setTimeout(() =>{
    reSize()
  },10)
}
function nextPage() {
  nowPage.value++
  if (listNum.value === 7){
    if (list.items.length === 7){
      // listNum3.value = listNum.value*nowPage.value-1
      // listNum2.value += listNum.value*nowPage.value
      api(nowDay.value,list.items.length*nowPage.value-list.items.length,7)
    }
  }else {
  //   listNum3.value = 6*nowPage.value-1
  //   listNum2.value = 6*nowPage.value
    // console.log(1)
    api(nowDay.value,list.items.length*nowPage.value-list.items.length-1,7)
  }
// else if (list.items.length === 6){
//     nowPage.value++
    // api(nowDay.value,listNum.value*nowPage.value-listNum.value,listNum.value)
  // }
}
function lestPage() {
  if (nowPage.value > 1){
    nowPage.value--
    if (nowPage){
      // listNum3.value -= listNum.value*nowPage.value-1
      // listNum2.value -= listNum.value*nowPage.value
      api(nowDay.value,list.items.length*nowPage.value-list.items.length,7)
    }else {
      api(nowDay.value,0,listNum.value)
      // listNum3.value = 0
      // listNum2.value = listNum.value
    }
  }
}
function setNowTimes () {
  let myDate = new Date()
  let wk = myDate.getDay()-1
  let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  newDay.value = weeks[wk]
}
</script>

<style lang="less" scoped>
a{
  text-decoration: none;
}
.mar-list-zw{
  width: 100%;
  margin-top: 25px;
}
.timeList{
  background-color: #f1f2f3;
  padding: 2px 2px;
  border-radius: 50px;
}
.timeBoxOne{
  border: none;
  border-radius: 50px;
  padding: 8px 15px;
}
.timeListBox{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 5px 15px;
  border-radius: 50px;
}
.butActive{
  color: #f3a0c8;
  background-color: #fff;
}
.bt-svg{
  width: 35px;
}
.top-title{
  //width: 100%;
  display: flex;
  position: relative;
}
.one-title{
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.title-one{
  font-size: 25px;
}
.span-def{
  font-family: "黑体";
  font-weight: bold;
}
.bor-t-l-r{
  border-radius: 8px;
  overflow: hidden;
}
.z-10{
  z-index: 10;
}
.span-out-hid{
  width: 100%;
  font-size: 15px;
  color: #18191c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.player-all-box{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: none;
}
.video-player-box{
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
  flex: 1;
}
.video-player-box>video{
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
  content-visibility: visible;
  object-fit: cover;
}
.div-waike{
  position: relative;
}
.overHIde{
  //-webkit-box-flex: 0;
  //width: calc(83.33% - 3.33px);
  //flex: 0 0 calc(83.33% - 3.33px);
  overflow: hidden;
}
.span-def{
  font-family: "黑体";
  font-weight: bold;
}
.p-r{
  position: relative;
}
.p-a{
  position: absolute;
}

.up-list-all{
  width: 100%;
  display: flex;
  //justify-content: center;
  margin-bottom: 25px;
}
.up-list{
  //width: 100%;
  display: flex;
  //flex-direction: row;
  //min-width: 1020px;
  //max-width: 1790px;
  /* min-width: 1180px; */
  height: calc(100% - 33px);
}
.time-back-left{
  //flex: 1;
  left: 0;
  top: 0;
  margin-top: 25px;
  width: 7.5%;
  height: calc(100% - 33px);
}
.time-back-right{
  //flex: 1;
  right: 0;
  top: 0;
  margin-top: 25px;
  width: 7.5%;
  height: calc(100% - 33px);
}
.timeBackGreen{
  border-top: 2px solid rgb(205, 239, 215);
  background: linear-gradient(rgba(0, 173, 52, 0.08), rgba(0, 173, 52, 0));
}
.timeBackYellowgreen{
  border-top: 2px solid rgb(227, 239, 205);
  background: linear-gradient(rgba(113, 173, 0, 0.08), rgba(113, 173, 0, 0));
}
.timeWeek4{
  border-top: 2px solid rgb(209, 234, 242);
  background: linear-gradient(rgba(2, 152, 193, 0.08), rgba(2, 152, 193, 0));
}
.timeWeek5{
  border-top: 2px solid rgb(220, 225, 249);
  background: linear-gradient(rgba(52, 89, 238, 0.08), rgba(52, 89, 238, 0));
}
.timeWeek6{
  border-top: 2px solid rgb(236, 221, 251);
  background: linear-gradient(rgba(159, 80, 238, 0.08), rgba(159, 80, 238, 0));
}
.timeWeek3{
  border-top: 2px solid rgb(205, 238, 239);
  background: linear-gradient(rgba(0, 171, 173, 0.08), rgba(0, 171, 173, 0));
}
.timeBackPink{
  border-top: 2px solid rgb(251, 219, 244);
  background: linear-gradient(rgba(234, 62, 199, 0.08), rgba(234, 62, 199, 0));
}
.up-list-one{
  margin: 25px 0 0 0;
  width: 100%;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
}
.up-list-one>img{
  display: flex;
  border-radius: 8px;
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.weekSpan{
  border-radius: 10px;
  padding: 2px 10px;
  position: absolute;
  font-family: "黑体";
  font-weight: bold;
  top: -12px;
}
.weekdayGreen{
  background: rgb(205, 239, 215);
  color: rgb(0, 173, 52)
}
.weekdayPink{
  background: hsl(312, 78%, 92%);
  color: hsl(312, 80%, 58%);
}
.weekSpan1{
  background: rgb(227, 239, 205);
  color: rgb(113, 173, 0);
}
.weekSpan3{
  background: rgb(205, 238, 239);
  color: rgb(0, 171, 173);
}
.weekSpan4{
  background: rgb(209, 234, 242);
  color: rgb(2, 152, 193);
}
.weekSpan5{
  background: rgb(220, 225, 249);
  color: rgb(52, 89, 238);
}
.weekSpan6{
  background: rgb(236, 221, 251);
  color: rgb(159, 80, 238);
}
.right-button{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  right: -20px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(50% - 25px);;
  z-index: 2;
  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
  border: 1px solid #f1f2f3;
  transition: transform .2s,-webkit-transform .2s;
}
.left-button{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  left: -24px;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(50% - 25px);;
  z-index: 2;
  box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
  border: 1px solid #f1f2f3;
  transition: transform .2s,-webkit-transform .2s;
}
.tv-show-box{
  margin: 25px 0;
  width: 85%;
  max-width: 1790px;
  z-index: 5;
}
.show-tv-one{
  display: flex;
  width: 60%;
  /* background-color: cornflowerblue; */
  border-radius: 8px;
  z-index: 5;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.xq-tv-one{
  display: flex;
  justify-content: flex-end;
  left: 5%;
  width: 95%;
  height: 100%;
  top: 25px;
  border-radius: 8px;
  background: rgb(243, 59, 46);
}
.xq-list-one{
  width: 38.5%;
  display: flex;
  flex-direction: column;
  padding: 15px 30px;
  justify-content: flex-end;
  z-index: 2;
}
.pf-box{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.pf-one{
  display: flex;
  align-items: center;
}
.dp-box{
  margin-left: 15px;
}
.video-de{
  width: 100%;
  height: 100%;
  object-fit: fill
}
.nr-body{
  padding: 10px 0 20px 0;
}
.tv-go{
  display: flex;
  flex-direction: row;
}
.tv-go-one{
  width: 50px;
  height: 50px;
  background-color: hsla(0,0%,100%,.2);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  margin-right: 25px;
  border: none;
}
.next-slt-box{
  overflow-x: auto;
  display: flex;
  padding: 15px 0 35px 0;
}
.tv-slt-one{
  min-width: 145px;
  border-radius: 8px;
  border: 4px solid hsla(0,0%,100%,.2);
  margin: 5px;
}
.tv-slt-one>img{
  border-radius: 8px;
}
.back-img{
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .15;
  z-index: -1;
}
.background-cover{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  height: 73px;
  z-index: 2;
  background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.00386607) 8.07%,rgba(0,0,0,.0152486) 15.54%,
  rgba(0,0,0,.033824) 22.5%,rgba(0,0,0,.0592687) 29.04%,rgba(0,0,0,.0912593) 35.26%,rgba(0,0,0,.129472) 41.25%,
  rgba(0,0,0,.173583) 47.1%,rgba(0,0,0,.22327) 52.9%,rgba(0,0,0,.278208) 58.75%,rgba(0,0,0,.338074) 64.74%,
  rgba(0,0,0,.402545) 70.96%,rgba(0,0,0,.471296) 77.5%,rgba(0,0,0,.544005) 84.46%,rgba(0,0,0,.620347) 91.93%,rgba(0,0,0,.7));

}
.tip{
  bottom: 15px;
  left: 8px;
  z-index: 4;
}

.tip-span{
  font-size: 12px;
  font-weight: bold;
  font-family: 黑体;
  padding: 4px 8px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: white;
  margin: 0 5px;
  -ms-user-select: none;
  user-select: none;
}
.go-player-box{
  display: flex;
  flex-direction: row;
  bottom: 15px;
  right: 10px;
  z-index: 6;
}
.go-box{
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(134, 62, 234);
}
.link-one{
  margin-left: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #00000099;
}
.box-active{
  -webkit-transition: -webkit-box-flex .5s;
  transition: -webkit-box-flex .5s;
  -o-transition: flex .5s;
  transition: flex .5s;
  transition: flex .5s,-webkit-box-flex .5s,-ms-flex .5s;
}
.noneBox{
  display: block;
}
.blockBox{
  display: none;
}
.up-list-def-w{
  display: flex;
  transition: flex .3s,-webkit-box-flex .3s,-ms-flex .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  flex-direction: column;
  margin-top: 25px;
  padding: 0 8px;
  height: calc(100% - 33px);
}

@media screen and (min-width: 2061px){
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.3%;
    flex: 0 0 14.3%;
    width: 14.3%;
  }
  .time-back-right,.time-back-left{
    width: calc(50% - 892px);
  }
  .div-waike,.top-title {
    width: 1784px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.3%;
    flex: 0 0 14.3%;
    width: 14.3%;
  }
  .time-back-right,.time-back-left{
    width: 136px;
  }
  .div-waike,.top-title {
    width: 100%;
    margin: 0 136px;
  }
}
@media screen and (min-width: 1400px) and (max-width: 1559.8px) {
  .up-list-def-w {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.3%;
    flex: 0 0 14.3%;
    width: 14.3%;
  }
  .time-back-right,.time-back-left{
    width: 60px;
  }
  .div-waike,.top-title {
    margin: 0 60px 0 60px;
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 calc(30% - 12px);
  }
}
.playerBox {
  -webkit-box-flex: 0;
  flex: 0 0 calc(30% - 25px);
}
@media screen and (min-width: 1301px) and (max-width: 1399.8px) {
  .div-waike,.top-title {
    width: 1180px;
    margin: 0 auto;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.7%;
    flex: 0 0 16.7%;
    width: 16.7%;
  }
  .time-back-right,.time-back-left{
    width: calc(50% - 590px);
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 33%;
    width: 33%;
  }
}
@media screen and (min-width: 1140px) and (max-width: 1300.8px) {
  .div-waike,.top-title {
    margin: 0 60px;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66%;
    flex: 0 0 16.66%;
    width: 16.66%;
  }
  .time-back-right,.time-back-left{
    width: 60px;
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 33.33%;
    width: 33.33%;
  }
}
@media screen and (max-width: 1139.8px) {
  .div-waike,.top-title {
    width: 1020px;
    margin: 0 auto;
  }
  .up-list-def-w{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.7%;
    flex: 0 0 16.7%;
    width: 16.7%;
  }
  .time-back-right,.time-back-left{
    width: calc(50% - 510px);
  }
  .playerBox {
    -webkit-box-flex: 0;
    flex: 0 0 33.33%;
    width: 33.33%;
  }
}

</style>
